<template>
    <div class="container">
      <div class="min-containerone">
        <img
          style="width: 100%; height: 250px"
          src="../assets/f26289bacce157c93f23c65a85a2fd6.png"
          alt=""
        />
      </div>
      <div class="min-containertwo">
        <div class="profile">
          <div class="profile-header">
            <img
              style="
                width: 100px;
                height: 100px;
                border-radius: 50px;
                transform: translateY(-20px);
              "
              :src="item.headUrl"
              size="large"
            />
          </div>
          <div class="profile-body">
            <Layout>
              <div style="font-size: 18px; font-weight: bold">
                {{ item.nickname }}
              </div>
              <div style="font-size: 14px">
                这个人很懒，什么都没有留下来<i
                  @click="showmessage = !showmessage"
                  style="
                    font-size: 10px;
                    color: blue;
                    margin-left: 10px;
                    transform: translateY(-20px);
                  "
                  >查看详情</i
                >
              </div>
              <Button  @click="openCode()" type="success">聊一聊</Button>
              <Drawer title="聊一聊" :closable="false" v-model="value" width="500">
                 <div style="width: 100%;height: 100%">
                  <div style="width: 100%;height: 80% ;overflow: auto;">
                    <div v-for="( chart ,index) in item" :key="index" style="display: flex;position: relative;overflow: auto;">
                      <Img style="height: 60px;height: 60px;margin: 10px;" :src=chart.headUrl></Img>
                      <div style="width:60%; font-size: 20px;margin-top: 30px;">{{chart.chart}}</div>
                    </div>
                    </div>
                 <div style="width: 100%;height: 20%;background: #ffffff;position: relative;">
                  <div style="margin-top: 10px;">
                    <Input v-model="sentMessage" type="textarea" :rows="5" placeholder="Enter something..." />  
                    <Button style="width: 100%;" type="success" @click="sentMessages()">发送</Button>
                </div>
                </div>
                </div>
             </Drawer>
              <Content>
                <div v-show="showmessage" style="display: flex">
                  <div>{{ item.sex }}</div>
                  <div style="margin-left: 10px">{{ item.phoneNum }}</div>
                </div>
              </Content>
            </Layout>
          </div>
        </div>
      </div>
          <!-- <div style="width: 100%;height:450px;overflow: auto;display: flex;">
            <div v-for="product in items" :key="product.id" class="product">
           <img :src=product.imgInfosBOs[0]?.imgUrl alt="Product image" class="product-image">
           <div class="product-details">
           <div class="product-title">标题：{{product.title}}</div>
           <div class="product-price">价格：{{ product.price }}</div>
         </div>
     </div>
          </div> -->
          <div class="products">
    <div v-for="product in items" :key="product.id" class="product3">
      <img :src="product.imgInfosBOs[0].imgUrl" alt="Product image" class="product-image">
      <div class="product-details">
        <div class="product-title">标题：{{product.title}}</div>
        <div class="product-price">价格：{{ product.price }}</div>
      </div>
    </div>
  </div>
      <Button style="margin-left: 20px;margin-top: 20px;" type="success" @click="backHome()">返回主页</Button>
    </div>
    
  </template>
  
  <script>
  import axios from 'axios';
  export default {    
    data() {
      return {
        value:false,
      // sentMessage:'',
      showmessage: false,
        user: {},
        activeName: "second",
        id:'',
        items:[],
        item:[],
        sentMessage:'',
      };
    },
    created(){
      this.id = this.$route.params.studentId
      this.getUserMess()
    },
    mounted() {
    },
    methods:{
      getUserMess(){
        console.log(this.$route.params.studentId);
        axios
          .post(
            "http://localhost:8081/salvage/students/getStudentAndProdById",
            {
                studentId:this.$route.params.studentId
            }
          ).then((response) => {
          this.items = response.data.data.products;
          console.log(this.items);
          this.item =  response.data.data;
        }).catch((error) => {
          console.error(error);
          this.loading = false;
        });
      },
      backHome(){
     this.$router.push({
      name:'theHome'
     })
      },
      openCode(){
      this.value = true;
      this.getmessage()
    },
    //发送消息
    sentMessages(){
      console.log( this.id);
        axios.post('http://localhost:8081/salvage/charts/sendChart',{
           studentId:this.id,
           chart:this.sentMessage
        })
        this.sentMessage=''
        this.getmessage()
      },
      //查看所有信息
      getmessage(){
        axios.post('http://localhost:8081/salvage/charts/getCharts',{studentId:''})
        .then((res)=>{
          console.log(res.data.data);
          this.item = res.data.data
        })
      }
    }
  };
  </script>
  
<style scoped>
  .container {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* flex-wrap: wrap; */
    
  }
  .min-containertwo {
    margin-left: 40px;
    border-bottom: 1px solid rgb(231, 231, 231);
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .min-containerone {
    border-bottom: 1px solid rgb(231, 231, 231);
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .profile {
    display: flex;
    align-items: center;
    /* padding: 20px; */
  }
  
  .profile-header {
    margin-right: 20px;
  }
  .products {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  position: relative;
  gap: 20px;
  margin: 20px;
  overflow: auto;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px;
}

.product3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: auto;
}

.product-details {
  margin-top: 10px;
  text-align: center;
}

.product-title {
  font-size: 1.2rem;
  font-weight: bold;
}

.product-price {
  font-size: 1rem;
  color: green;
  margin-top: 5px;
}
  </style>